<template>
    <div class="filmlist">
        <div @click="jumpUrl(`/film/${film.filmId}`)" class="item" v-for="film in films" :key="film.filmId">
            <div class="left">
                <img :src="film.poster" />
            </div>
            <div class="middle">
                <div class="info">
                    <h1>{{ film.name }}</h1>
                    <p v-show="type === 'now'">
                        观众评分:<span class="grade">{{ film.grade }}</span>
                    </p>
                    <p>主演:{{ film.actors | format_actor }}</p>
                    <p v-show="type === 'now'">{{ film.nation }} | {{ film.runtime }}分钟</p>
                    <p v-show="type === 'commingsoon'">上映日期：{{ film.premiereAt | format_date }}</p>
                </div>
            </div>
            <div class="right">
                <span v-if="type === 'now'">购票</span>
                <span v-else>预购</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        films: {
            type: Array,
            required: true
        },
        type: {
            type: String,
            default: 'now'
        }
    },
    
    methods: {
        jumpUrl(_url){
            this.$router.push(_url)
        }
    },
    filters: {
        format_actor(_val) {
            if (_val) {
                let names = _val.map(item => item.name)
                return names.join(' ')
            } else return '暂无演员信息'

        },
        format_date(_val) {
            let week = {
                0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六',
            }
            if (_val) {
                // 1686873600+'000'-0
                let date = new Date(_val + '000' - 0)
                return `${week[date.getDay()]} ${date.getMonth() + 1}月${date.getDay()}日`
            } else {
                return '暂无上映日期'
            }
        }
    },
    created() { },
};
</script>

<style lang="less" scoped>
@import "../assets/Less/common.less";

.item {
    box-sizing: border-box;
    padding: 10px;
    border-bottom: 1px solid @border_color;
    .flex(space-between);

    .left {
        width: 66px;
        height: 98px;
        overflow: hidden;
        margin-right: 10px;

        img {
            width: 100%;
        }
    }

    .middle {
        flex: 1;

        .info {
            text-align: left;

            h1 {
                font-size: @title_font_size;
                font-weight: normal;
                color: @text_color;
            }

            p {
                color: @gray_text_color;
                font-size: @normal_font_size;
                margin: 5px 0;

                .grade {
                    color: @main_color;
                }

                &:nth-child(3) {
                    width: calc(100vw - 160px);
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }

    .right {
        width: 50px;

        span {
            line-height: 25px;
            border: 1px solid @main_color;
            font-size: @normal_font_size;
            color: @main_color;
            padding: 5px 10px;
            border-radius: 3px;
        }
    }
}
</style>
